import Icon from '@/components/Icon'
import useInitState from '@/hooks/useInitState'
import { userProfileActionCreate } from '@/store/actions/profile'
import { getToken } from '@/utils/token'
import { NavBar, Input } from 'antd-mobile'
import { useEffect, useRef, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { io, Socket } from 'socket.io-client'
import styles from './index.module.scss'

type Messages = {
  type: 'robot' | 'user'
  text: string
}

const Chat = () => {
  const history = useHistory()
  const { userProfile } = useInitState(userProfileActionCreate).profile

  //定义一个状态 消息数组
  const [messages, setMessages] = useState<Messages[]>([
    { type: 'robot', text: '亲爱的用户您好，小智同学为您服务。' },
    { type: 'user', text: '你也好' },
  ])

  //将来发送消息, 都需要滚动滚动条到底部
  // 监听messages消息列表数组变化了
  useEffect(() => {
    // 这个函数会在messages变化时, 自动出去
    const div = listRef.current!
    // 获取消息列表的dom 设置滚动距离位最大距离(内容实际高度-本身高度)  会自动滚动到自己的最大距离
    div.scrollTop = div.scrollHeight

    // div.scrollTop = div.scrollHeight - div.offsetHeight
  }, [messages])

  const listRef = useRef<HTMLDivElement>(null)
  const clientRef = useRef<Socket | null>(null)

  useEffect(() => {
    // 利用socket.io-client 于服务器建立链接
    const client = io('http://toutiao.itheima.net', {
      transports: ['websocket'],
      query: {
        token: getToken().token,
      },
    })

    clientRef.current = client

    // 这是注册监听事件的
    //client.on(事件名, 回调函数)
    client.on('connect', () => {
      // 一旦与服务器成功链接就会执行
      console.log('链接成功了...')

      // 谅解成功后, 页面中小智多一条消息, 随时等待你的提问
      // setMessages([
      //   ...messages,
      //   {
      //     type: 'robot',
      //     text: '小智准备就绪, 可以随时开始提问',
      //   },
      // ])

      setMessages((prevState) => {
        return [
          ...prevState,
          {
            type: 'robot',
            text: '小智准备就绪, 可以随时开始提问',
          },
        ]
      })
    })

    client.on('disconnect', () => {
      console.log('断开链接了...')
    })

    // 监听服务端发过来的消息?
    // 如何发消息给服务端   client.emit(约定号的事件名, 值)
    // client.emit('message', {
    //   msg: '你是谁',
    //   timestamp: Date.now(),
    // })

    client.on('message', (data) => {
      // 一旦与服务器成功链接就会执行
      console.log('服务端消息来了', data)

      // 将服务端返回的数据 添加到messages中去 => 回调函数的形式修改装填 (因为需要基于上一个计算的数据得到)
      setMessages((prevState) => {
        return [
          ...prevState,
          {
            type: 'robot',
            text: data.msg,
          },
        ]
      })
    })

    // setTimeout(() => {
    //   // 在延时器中模拟, 必须等websocket链接之后, 才开始发送消息
    //   client.emit('message', {
    //     msg: '你快乐吗?',
    //     timestamp: Date.now(),
    //   })
    // }, 4000)

    return () => {
      // 组件卸载时, 断开链接
      client.close()
    }
  }, [])

  const [inputValue, setInputValue] = useState('')

  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar className="fixed-header" onBack={() => history.go(-1)}>
        小智同学
      </NavBar>

      {/* 聊天记录列表 */}
      <div className="chat-list" ref={listRef}>
        {/* 机器人的消息 */}
        {/* <div className="chat-item">
          <Icon name="iconbtn_xiaozhitongxue" />
          <div className="message">你好！</div>
        </div> */}

        {/* 用户的消息 */}
        {/* <div className="chat-item user">
          <img src={userProfile.photo} alt="" />
          <div className="message">你好？</div>
        </div> */}

        {messages.map((item, index) => {
          if (item.type === 'robot') {
            return (
              <div className="chat-item" key={index}>
                <Icon name="iconbtn_xiaozhitongxue" />
                <div className="message">{item.text}</div>
              </div>
            )
          } else {
            return (
              <div className="chat-item user" key={index}>
                <img src={userProfile.photo} alt="" />
                <div className="message">{item.text}</div>
              </div>
            )
          }
        })}
      </div>

      {/* 底部消息输入框 */}
      <div className="input-footer">
        <Input
          value={inputValue}
          onChange={(val) => {
            // console.log('val', val)
            setInputValue(val)
          }}
          onKeyUp={(e) => {
            // console.log('e ', e.key, e.keyCode)
            if (e.key === 'Enter' && inputValue.trim()) {
              // console.log('按下回车了')
              // 1. 发送消息到后端
              clientRef.current?.emit('message', {
                msg: inputValue,
                timestamp: Date.now(),
              })
              // 2. 将自己的消息添加到消息列表中
              setMessages([...messages, { type: 'user', text: inputValue }])

              // 3. 清空输入框
              setInputValue('')

              // 4. 将机器人的数据显示到页面中
            }
          }}
          className="no-border"
          placeholder="请描述您的问题"
        />
        {/* <Icon name="iconbianji" /> */}
      </div>
    </div>
  )
}

export default Chat
